<template>
	<view>
		<view><image style="width: 100%;height: auto;" :src="info.cover" mode="widthFix"></image></view>
		<view class="content">
			<uni-title type="h3" :title="info.title"></uni-title>
			<view class="fz07rem mt10">{{info.start_time_exp}} — {{info.end_time_exp}}</view>
			<view class="mt10">报名人数 {{info.surplus}}/{{info.number}}人</view>
			<view class="mt5"><progress :percent="info.surplus/info.number * 100" stroke-width="3" /></view>
			<uni-title type="h2" title="培训介绍"></uni-title>
			<view v-html="info.contents"></view>
		</view>
		<view class="fixed-bottom" v-show="isShow">
			<uni-goods-nav :fill="true" :options="options" :button-group="customButtonGroup" @click="onClickOption" @buttonClick="buttonClick" />
		</view>
		
		<uni-popup ref="popup" background-color="#fff" @change="onPopup">
			<view class="overflow-y p15">
				<uni-forms ref="baseForm" :modelValue="form" label-position="top">
					<uni-forms-item label="姓名">
						<uni-easyinput v-model="form.name" placeholder="请输入姓名" />
					</uni-forms-item>
					<uni-forms-item label="电话" required>
						<uni-easyinput v-model="form.tell" placeholder="请输入电话" />
					</uni-forms-item>
					<uni-forms-item label="岗位">
						<uni-data-checkbox v-model="form.position" :localdata="posts" />
					</uni-forms-item>
				</uni-forms>
				<button class="default-button" @click="save()">提交</button>
			</view>
		</uni-popup>
		
		<uni-popup ref="popupCustomer" background-color="none">
			<customerVue></customerVue>
		</uni-popup>
	</view>
</template>

<script>
	import customerVue from '../../components/customer.vue'
	export default {
		components: {
			customerVue
		},
		data() {
			return {
				id:0,
				timestamp:0,
				info:{title:'',start_time:'',end_time:'',surplus:0,number:0,contents:''},
				form:{name:'',tell:'',position:''},
				posts: [
					{text: '公司负责人',value: '公司负责人'},
					{text: '工程部经理',value: '工程部经理'},
					{text: '项目经理',value: '项目经理'},
					{text: '预算员',value: '预算员'},
					{text: '施工员',value: '施工员'},
					{text: '深化设计',value: '深化设计'},
					{text: '其他',value: '其他'},
				],
				
				isShow:true,
				options: [{
					icon: 'paperplane',
					text: '咨询',
					type:'paperplane',
				}],
				customButtonGroup: [
					{ icon: 'shop',text: '立即报名', backgroundColor: '#FFD101', color: '#333' },
				],
				unSign:{ icon: 'shop',text: '活动结束', backgroundColor: '#a0a69f', color: '#333' },
				
				shareinfo:{title:'',img:'',path:''}
			}
		},
		onLoad(options){
			this.id = options.id
			this.timestamp = this.$func.getTimestamp()
			this.onGetInfo()
		},
		methods: {
			onGetInfo(){
				let _this = this
				this.$request_api('applet_api/train/'+_this.id,'GET').then(res => {
					_this.info = res.data
					if(_this.info.is_sign == false){
						_this.customButtonGroup[0] = _this.unSign
					}
					_this.info.surplus = _this.info.is_sign == true ? _this.info.surplus : _this.info.number
					_this.shareinfo.title = _this.info.title
					_this.shareinfo.img = _this.info.cover
				}).catch(err => {
					console.log(err)
				})
			},
			save(){
				let _this = this
				console.log(this.form.position)
				if(!this.form.name){
					uni.showToast({title: '请输入姓名',icon: 'error',duration: 2000})
					return;
				}
				if(!this.form.tell){
					uni.showToast({title: '请输入电话',icon: 'error',duration: 2000})
					return;
				}
				
				if(!this.$func.isValidPhoneNumber(this.form.tell)){
					uni.showToast({title: '电话号码格式错误',icon: 'error',duration: 2000})
					return;
				}
				if(this.form.position === ''){
					uni.showToast({title: '请输入岗位',icon: 'error',duration: 2000})
					return;
				}
				this.form.id = this.id
				this.$request_api('applet_api/train/enroll','POST',this.form).then(res => {
					if(res.code != 200){
						uni.showToast({title: res.msg,icon: 'error',duration: 2000})
						return;
					}
					uni.showToast({title: '报名申请提交成功,近期我们会联系您',icon: 'success',duration: 2000})
					this.$refs.popup.close()
				}).catch(err => {
					console.log(err)
				})
			},
			onPopup(){
				this.isShow = !this.isShow
			},
			onClickOption(e){
				if(e.content.type == 'paperplane'){
					this.$refs.popupCustomer.open('center')
				}
			},
			buttonClick(e) {
				if(!_this.info.is_sign){
					return;
				}
				this.$refs.popup.open('bottom')
			},
		}
	}
</script>

<style scoped lang="scss">
.content{padding: 15px 15px 80px 15px;}
.referee-button{background-color: #FFF;color: #333;border: 1px solid #FFF;}
.fixed-bottom{padding: 10px 0px 20px 0px;background-color: #FFF;}
</style>
